<template>
	<div class="denglu">
      <mt-header title="登录" :fixed="isFixed">
        <router-link to="/" slot="left">
          <div class="iconfont">&#xe603;</div>
        </router-link>
      </mt-header>
       <div class="kong"></div>
      <div class="logo"></div>
      <div class="box">
      	<input class="ID" type="text" placeholder="请输入您的手机号">
      	<input class="password" type="text" placeholder="请输入密码">
      	<a class="button" href="#">登录</a>
      	<router-link to="ZhuCe" slot="left">
      	<a class="zhuce">手机快速注册</a>
      	</router-link>
      	<router-link to="ZhuCe" slot="left">
      	<a class="mima" >忘记密码</a>
      	</router-link>
      </div>
	</div>
</template>


<script type="text/javascript">
	export default {
         data(){
          return{
            isFixed:true,
          }
        }
       }
</script>


<style scoped>
	
	header{
    	border-color: #111;
    	background-color: #581513;
    	color: #fff;
  	}
  	.denglu{
  		position: absolute;
  		top:0;
  		left:0;
  		bottom:0;
  		right:0;
  		background-color:pink;
  	}
  	 .kong{
    	height:40px;
    	position: relative;
  	}
  	.logo{
  		display: block;
    	width: 157px;
    	height: 43px;
    	background: url(../../assets/img/images/logoLogin.png) no-repeat 0 0;
    	-webkit-background-size: 157px 43px;
    	background-size: 157px 43px;
    	position: absolute;
    	top: 103px;
    	left: 50%;
    	transform: translate(-79px,0px);
  	}
  	.box{
  		display: block;
    	width: 300px;
    	height: 190px;
    	position: absolute;
    	top: 200px;
    	left: 50%;
    	transform: translate(-150px,0px);
    	letter-spacing: 0px;
    	font-size: 0px;
  	}
  	.ID{
  		display: inline-block;
    	vertical-align: top;
    	padding-left: 40px;
    	width: 300px;
    	height: 40px;
    	border-radius: 4px;
    	border: 1px solid #682a25;
    	box-sizing: border-box;
    	background-color: rgba(255,255,255,0);
    	background: url(../../assets/img/images/ID.png) no-repeat 0 0;
    	-webkit-background-size: 40px 40px;
    	background-size: 40px 40px;	
  	}
  	.password{
  		display: inline-block;
    	vertical-align: top;
    	padding-left: 40px;
    	width: 300px;
    	height: 40px;
    	border-radius: 4px;
    	border: 1px solid #682a25;
    	box-sizing: border-box;
    	background-color: rgba(255,255,255,0);
    	background: url(../../assets/img/images/cade.png) no-repeat 0 0;
    	-webkit-background-size: 40px 40px;
    	background-size: 40px 40px;
    	margin-top:20px;
  	}
  	.button{
  		display: inline-block;
    	vertical-align: top;
    	height: 40px;
    	width: 300px;
    	border-radius: 4px;
    	background-color: #682a25;
    	font-size: 16px;
    	color: #f9ac7d;
    	line-height: 38px;
    	text-align: center;
    	margin-top:20px;
  	}
  	.zhuce{
  		display: inline-block;
    	font-size: 15px;
    	color: #682a25;
    	line-height: 15px;
    	height: 15px;
    	margin-top:15px;
  	}
  	.mima{
  		display: inline-block;
    	font-size: 15px;
    	color: #682a25;
    	line-height: 15px;
    	height: 15px;
    	float: right;
    	margin-top:15px;
  	}
</style>